/*主页index.html的样式表*/

/*顶部导航条的容器*/
.top-bar-wrapper{
	width: 100%;
	height: 40px;
	/*设置垂直居中*/
	line-height: 40px;
	background-color: #333;
}


/*设置超链接的颜色*/
.top-bar a{
	font-size: 12px;
	color: #b0b0b0;
	display: block;
}

.top-bar a:hover{
	color: #fff;
}

.top-bar .line{
	font-size: 12px;
	color: #424242;
	margin: 0 8px;
	/*可有可无*/
	margin-top: -2px;
}
/*设置左侧导航栏*/
.service,.top-bar li{
	float: left;
}

.app{
	position: relative;
}

/*设置app下的小三角*/
/*.app-wrapper:hover > .app::after{*/
.app::after{	
	content: '';
	display: none;
	/*设置绝对定位*/
	position: absolute;
	width: 0;
	height: 0;
	/*设置四个方向的边框*/
	border: 7px solid transparent;
	/*去除上边框*/
	border-top: none;
	/*单独设置下边框的颜色*/
	border-bottom-color: #fff;
	/*三角的位置*/
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;
}
.app:hover .qrcode,
.app:hover::after{
	display: block;
	height: 148px;
}
/*
 * 两种写法都可以
 * .app-wrapper:hover>.app .qrcode{
	display: block;
}*/

/*设置下载app的下拉菜单*/
.app .qrcode{
	/*display: none;*/
	position: absolute;
	left: -40px;
	width: 124px;
	height: 0px;
	overflow: hidden;
	line-height: 1;
	background-color:#fff;
	box-shadow: 0 0  10px rgba(0,0,0,0.3);
	text-align: center;
	
	/*transsition：用于为样式设置过渡效果*/
	transition:height .5s;
	z-index: 9999;
}
/*设置二维码文字*/
.qrcode span{
	font-size: 14px;
	color: #333;
	
}
/*设置二维码图片*/
.app .qrcode img{
	width: 90px;
	margin: 17px;
	margin-bottom: 12px;
}
.shop-cart, .user-info{
	float: right;
}

.shop-cart{
	margin-left: 26px;
	position: relative;
}
/*设置购物车的样式*/
.shop-cart a{
	width: 120px;
	background-color: #424242;
	text-align: center;
}

.shop-cart:hover a{
	background-color: #fff;
	color: #FF6700;
}
.shop-cart i{
	margin-right: 2px;
}

.shop-cart .shopping-cart-menu{
	position: absolute;
	right: 0;
	width: 316px;
	height: 0px;
	top: 40px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0, 0, .15);
	color: #424242;
	overflow: hidden;
	transition: height .2s;
	/*line-height: 100px;*/
	/*text-align: center;*/
	z-index: 9999;
	
}
.shop-cart .shopping-cart-menu .menu-content{
	position: relative;
	float: right;
	width: 230px;
	height: 40px;
	margin-left: 50px;
	font-size: 12px;
	padding: 30px 43px 0;
}
.shop-cart:hover .shopping-cart-menu{
	height: 100px;
	display: block;
}


/*设置中间的header*/
.header{
	height: 100px;
	
	
}
.header .logo{
	float: left;
	margin-top: 22px;
	width: 56px;
	height: 56px;
	/*隐藏logo中的文字*/
	/*text-indent:-9999px;*/
}
.header .logo a{
	display: block;
	width: 56px;
	height: 56px;
	background-color: pink;
	background-image:url("../img/logo-footer.png");
	background-position: center;
	border-radius: 17px;
}


/*设置中间的导航条*/
.header .nav-wrapper{
	float: left;
	margin-left: 7px;

}

/*设置导航条*/
.header .nav{
	/*width: 792px;*/
	height: 100px;
	line-height: 100px;
	padding-left: 58px;
	
}
/*设置导航条中的li，nav的子元素浮动，不然左侧导航条也会自动浮动*/
.nav> li {
	float: left;
	
}


.all-goods-wrapper{
	position: relative;
}

.left-menu{
	position: absolute;
	width: 234px;
	height: 420px;
	padding: 20px 0;
	background-color:rgba(0,0,0,.6);
	z-index: 999;
	left: -120px;
	line-height: 1;
	
}

ul .left-menu li a{
	display: block;
	height: 42px;
	line-height: 42px;
	color: #fff;
	margin-right: 0;
	padding: 0 20px;
	font-size:14px;
	
}
ul .left-menu li a:hover {
	background-color: #ff6700;
	color: #fff;
}
.left-menu i{
	float: right;
	line-height: 42px;
}
.nav-wrapper li a{
	font-size: 16px;
	display: block;
	margin-right: 20px;
}

.header-wrapper{
	position: relative;
	/*background-color: red;*/
}
.nav-wrapper li a:hover{
	color: #FF6700;
}

/*隐藏全部商品*/
.all-goods{
	/*display: none; 隐藏之后原来的位置会被其他元素取代*/
	visibility: hidden;
}



.nav .show-goods:hover ~.goods-info,
.nav .goods-info:hover{
	height: 228px;
	box-shadow: 0 5px 3px rgba(0,0,0,.2);
	border-top: 1px solid rgb(224,224,224);
	
	
}

.nav .goods-info{
	/*height: 228px;*/
	height: 0;
	overflow:hidden;
	width: 100%;
	/*background-color: #bfa;*/
	
	position: absolute;
	left: 0;
	top: 100px;
	background-color: #fff;
	/*box-shadow: 0 5px 3px rgba(0,0,0,.2);
	border-top: 1px solid rgb(224,224,224);*/
	transition: height .2s;
	z-index: 9999;
	
}

/*设置搜索框*/
.search-wrapper{
	width: 296px;
	height: 50px;
	float: right;
	/*background-color: red;*/:;
	
	margin-top: 25px;
}



/*因为文本框和按钮之间有空隙，所以可以设置浮动来取消
 或者在书写的时候二者之间没有空格*/
.search-wrapper .search-inp{
	box-sizing: border-box;
	float: left;
	width: 244px;
	border: none;
	/*取消文本框原有的内边距*/
	padding: 0 10px;
	height:50px;
	font-size: 16px;
	border: 1px solid rgb(224,224,224);
	outline: none;
}

/*设置input获取焦点后的样式*/
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus+button{
	border-color: #ff6700;
}

.search-wrapper .search-btn{
	float: left;
	width: 52px;
	height: 50px;
	padding:0;
	border: none;
	background-color: #fff;
	color: #616161;
	font-size:16px;
	border: 1px solid rgb(224,224,224);;
	border-left:none;
	
}

.search-wrapper .search-btn:hover{
	background-color: #FF6700;
	color: white;
	border: none;
}


.banner{
	height: 460px;
	position: relative;
}
.banner .img-list li{
	position: absolute;
}
/*设置banner的样式*/
.banner img{
	width: 100%;
	vertical-align: top;
}

/*设置五个小圆点*/
.pointer{
	position: absolute;
	bottom: 22px;
	right: 35px;
	
}
.pointer a{
	width: 6px;
	height: 6px;
	border: 2px solid rgb(255,255,255,0.4);
	border-radius: 50%;
	float: left;
	background-color:rgba(0,0,0,.4);
	margin-left: 8px;
}

.pointer a:hover,
.pointer  .active{
	border-color:rgba(0,0,0,.4) ;
	background-color:rgb(255,255,255,0.4);
}


/*设置两个箭头*/
.prev-next a{
	width: 41px;
	height: 69px;
	background-image: url("../img/icon-slides.png");
	position: absolute;/*如果不开启定位，则在图片的下面*/
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.prev-next .prev{
	left:234px;
	background-position: -84px 0;
	
}

.prev-next .prev:hover{
	/*left:234px;*/
	background-position: 0 0;
	
}
.prev-next .next{
	right: 0;
	background-position: -125px 0;
}

.prev-next .next:hover{

	background-position: -42px 0;
}

.back-top{
	width: 30px;
	height: 220px;
	background-color: #fff;
	/*开启固定定位*/
	position: fixed;
	
	bottom: 122px;
	right: 50%;
	margin-right: -643px;
	
	/*
	 布局的等式
	 left +margin-left + width + margin-right + right =视口的大小
	 
	 auto + 0 + 26 + 0 + 60 = 视口宽度
	 
	 auto + 0 + 26 + 0 +50% = 视口宽度
	 */
}


.phone li a{
	display: block;
	width: 30px;
	height: 40px;
	
	
}

.phone img{
	width: 100%;
	padding: 20px 0;
	
}



/*设置下部的广告区域*/
.ad{
	/*background-color: #bfa;*/
	height: 170px;
	width: 1226px;
	margin: 14px auto 0;
}



.ad .shortcut,
.ad .ad-img,
.ad li{
	float: left;
	
}

/*设置左侧快捷键方式*/
.ad .shortcut{
	width: 228px;
	height: 168px;
	background-color: #5f5750;
	margin-right: 14px;
	padding-top: 2px;
	padding-left: 6px;
}

.ad .shortcut li{
	position: relative;
}

/*设置上边框*/
.ad .shortcut li::before{
	content:'';
	position: absolute;
	width: 64px;
	height: 1px;
	background-color: #665e57;
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	
}

.ad .shortcut li::after{
	position: absolute;
	content: '';
	height: 70px;
	width: 1px;
	background-color: #665e57;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto 0 ;
	
}
/*设置快捷方式中的超链接*/
.ad .shortcut a{
	display: block;
	color: #cfccca;
	height: 84px;
	width: 76px;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
	
}

.ad .shortcut a:hover{
	color: #fff;
}

.ad .shortcut i{
	display: block;/*因为图标字体是独占一行的所以需要转换为块元素*/
	font-size: 20px;
	margin-top: 20px;
	
}



/*设置图片*/
.ad .ad-img li{
	width: 316px;
	margin-right: 15px;
}

.ad .ad-img li:last-child{
	margin: 0;
}

.ad .ad-img img{
	width: 100%;
}
